<template>

        <Row>
            <Col class="dashboard-editor-container">
                <panel-group :group-data="panelGroupData"/>
                <Card>
                    <Row style="margin-bottom: 10px">
                        <Col :span="12">
                            <div style="font-size: 20px">调度报表</div>
                        </Col>
                        <Col :span="12"  style="text-align: right">
                            <DatePicker v-model="dateDuring" type="daterange" format="yyyy-MM-dd" clearable
                                         placeholder="选择起始时间"/>&nbsp;&nbsp;&nbsp;&nbsp;
                            <Button @click="getDashBoardInfo" size="small" type="primary">查询</Button>
                        </Col>
                    </Row>

                    <Row style="background:#fff;padding:5px 5px 0;margin-bottom:32px;">
                        <div class="chart-wrapper">
                            <line-chart :chart-data="lineChartData"/>
                        </div>
                    </Row>
                </Card>
            </Col>
        </Row>

</template>

<script>
    import PanelGroup from './components/PanelGroup'
    import LineChart from './components/LineChart'
    import  util  from '@/libs/util'
    import {getChartInfo} from "@/projects/basic/api/jobadmin/dashboard";

    export default {
        name: 'JobDashboardAdmin',
        components: {
            PanelGroup,
            LineChart
        },
        data() {
            return {
                lineChartData: {
                    successData: [],
                    failData: [],
                    runningData: [],
                    lineCharDates: []
                },
                dateDuring: [],
                panelGroupData: {
                    jboLogCount: 0,
                    jobInfoCount: 0,
                    executorCount: 0
                },
                queryParams: {
                    startDate: null,
                    endDate: null
                }
            }
        },
        created() {
            this.getDashBoardInfo(this.queryParams)
        },
        methods: {
            getDashBoardInfo() {
                if(this.dateDuring.length==0||(this.dateDuring[0]==''&&this.dateDuring[1]=='')){
                    this.queryParams.endDate = util.formatDate(new Date(new Date().getTime()+24*60*60*1000));
                    this.queryParams.startDate = util.formatDate(new Date(new Date().getTime()-4*24*60*60*1000))
                }else{
                    this.queryParams.startDate = util.formatDate(this.dateDuring[0])
                    this.queryParams.endDate =  util.formatDate(this.dateDuring[1])
                }
                getChartInfo(this.queryParams).then(res => {
                    const {
                        data: {
                            jobInfoCount, jobLogCount, executorCount,triggerDayList, triggerDayCountRunningList, triggerDayCountFailList, triggerDayCountSucList
                        }
                    } = res
                    if (res.code === '0000') {
                        this.$nextTick(() => {
                            this.lineChartData.lineCharDates = triggerDayList
                            this.lineChartData.successData = triggerDayCountSucList
                            this.lineChartData.failData = triggerDayCountFailList
                            this.lineChartData.runningData = triggerDayCountRunningList
                            this.panelGroupData.jboLogCount = jobLogCount
                            this.panelGroupData.jobInfoCount = jobInfoCount
                            this.panelGroupData.executorCount = executorCount
                        })
                    }
                }).catch(function (err) {
                    console.log(err.message)
                })

            }
        }
    }
</script>

<style lang="less" rel="stylesheet/less" scoped>
    .dashboard-editor-container {
        .chart-wrapper {
            background: #fff;
            padding: 16px 16px 0;
            margin-bottom: 32px;
        }

        .panel-group {
            margin-top: 0px;
        }
    }
</style>
